<template>
    <div>
        <header>
            <div v-if="userInfo.authBtn.includes('/user/setNotify')">
                <el-button icon="el-icon-plus" type="primary" :size="customStyle.size" @click="handleEdit()">
                    {{$i18n.t('btnControl./notify.setNotify')}}
                </el-button>
            </div>
            <el-form  class="searchWrap" :size="customStyle.size" :model="sendData">
                <el-form-item>
                    <el-input v-model="sendData.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-date-picker
                        v-model="sendData.create_time"
                        type="date"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :size="customStyle.size" @click="getTableData()">搜 索</el-button>
                </el-form-item>
            </el-form>
        </header>
        <el-dialog :append-to-body="true"
            :close-on-click-modal="false"
            title="发布通知"
            :visible.sync="visible"
            width="80%"
        >
            <el-form label-width="80px" :model="sendFormData" :rules="rules" :size="customStyle.size" ref="commonValidateForm">
                <el-form-item label="通知标题" prop="info">
                    <el-input autocomplete="off"
                              v-model="sendFormData.info"
                              placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item prop="senduser" label="通知用户">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <el-checkbox-group v-model="sendFormData.senduser" @change="handleCheckedChange">
                        <el-checkbox v-for="user in userList" :label="user" :key="user">{{user}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item prop="msg" label="通知内容">
                    <div id="noteWrap"></div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="info" :loading="apiLoading" @click="visible=false">取消</el-button>
                <el-button type="primary" :loading="apiLoading" @click="rowSave(sendFormData,true)">保存</el-button>
           </span>
        </el-dialog>
        <el-table
            :data="tableData"
            border
            stripe
        >
            <el-table-column
                prop="info"
                width="300px"
                label="标题">
            </el-table-column>
            <el-table-column
                prop="msg"
                min-width="100px"
                label="内容">
                <template #default="scope">
                    <div v-html="scope.row.msg"></div>
                </template>
            </el-table-column>
            <el-table-column
                prop="readInfo"
                width="300px"
                label="通知">
                <template #default="scope">
                    <div class="readInfoWrap">
                        <p v-for="(i,index) in scope.row.readInfo" :key="index">
                            <span>{{i.username}}</span>
                            <span>{{i.create_time}}</span>
                        </p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="origin"
                label="来源">
                <template #default="scope">
                    {{scope.row.origin || "系统通知"}}
                </template>
            </el-table-column>
<!--            v-if="userInfo.authBtn.includes('/user/delNotify')"-->
            <el-table-column
                prop="handle"
                label="操作">
                <template #default="scope">
                    <el-button size="mini" v-if="scope.row.origin" @click="rowDelete({username:userInfo.username,info:scope.row.info},'确认删除此条通知',true)" type="danger" plain>
                        {{$i18n.t('btnControl./notify.delNotify')}}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {getLog} from '@/api/order'
import {mapGetters} from "vuex";
import moment from 'moment'
import tableMixin from '@/mixins/table'
import {getNotify, delNotify, setNotify, getUser} from "@/api/user";
import OrderInfo from "@/components/order-info";
import E from "wangeditor";
const evil = window.eval;
export default {
    name: "notify",
    components:{
        OrderInfo
    },
    computed:{
        ...mapGetters([
            'userList'
        ])
    },
    mixins:[tableMixin],
    data() {
        return {
            checkAll: false,
            isIndeterminate: false,
            sendFormData:{
                username:'',
                senduser:'',
                info:'',
                msg:''
            },
            rules: {
                senduser: [
                    { required:true, trigger: 'blur',message:'请选择通知用户' }
                ],
                username: [
                    { required:true, trigger: 'blur',message:'请输入发布用户' }
                ],
                info: [
                    { required:true, trigger: 'blur',message:'请输入通知标题' }
                ],
                msg: [
                    { required:true, trigger: 'blur',message:'请输入通知内容' }
                ],
            },
            visible:false,
            platformData:[],
            sendData:{
                username:'',
                create_time:'',
            },
            dialogVisible: false,
        }
    },
    created() {
        this.sendFormData.username=this.userInfo.username
        this.sendData.create_time =moment().format('YYYY-MM-DD');
    },
    methods: {
        evil,
        handleCheckAllChange(val) {
            this.sendFormData.senduser = val ? this.userList : [];
            this.isIndeterminate = false;
        },
        handleCheckedChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.userList.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.userList.length;
        },
        handleEdit(data){
            this.visible=true
            this.$nextTick(()=>{
                if(!this.editor){
                    this.editor = new E('#noteWrap')
                    this.editor.config.height = 300
                    this.editor.config.onchange = (Html) => {
                        this.sendFormData.msg = Html
                    }
                    this.editor.create()
                }
                if(data){
                    this.sendFormData.info=data.info
                    this.sendFormData.msg=data.msg
                    this.sendFormData.senduser=data.readInfo.map(i=>i.username)
                    this.handleCheckedChange(this.sendFormData.senduser)
                }else {
                    this.sendFormData.info=""
                    this.sendFormData.msg=""
                    this.sendFormData.senduser=[]
                }
                this.editor.txt.html(this.sendFormData.msg)
            })
        },
        rowSaveApi:setNotify,
        rowDeleteApi:delNotify,
        tableApi:getNotify,
    }
}
</script>

<style scoped lang="scss">
header {
    display: flex;
    justify-content: space-between;
}
.readInfoWrap {
    p {
        span:first-child {
            margin-right:15px;
        }
    }
}
</style>
